<!--
 * 底部导航
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <view class="pure-tabbar-item" :class="classes" :style="styles" @tap="handleClick" :hover-calss="hoverClass || globalHoverClass">
        <slot v-if="$slots.content"></slot>
        <template v-else>
            <view class="pure-tabbar-item-icon">
                <pure-icon :name="isActive ? item.activeIcon : item.icon" :mode="iconMode"></pure-icon>
            </view>
            <text class="pure-tabbar-item-text">{{ item?.name || "" }}</text>
        </template>
        <slot></slot>
    </view>
</template>

<script>
    import props from "./props.js";
    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // 头条、飞书：因为合并后丢失事件和 'provide/inject'
            // 京东：因为合并后不能合并外层 'class'
            // 百度：因为合并后会在控制台疯狂报警告
            // #ifndef MP-TOUTIAO || MP-LARK || MP-JD || MP-BAIDU
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true,
        },
        props: props,
        inject: {
            // 激活值
            activeValue: {
                from: "activeValue",
                default: () => {
                    return null;
                },
            },
            // 值键
            valueKey: {
                from: "valueKey",
                default: () => {
                    return "value";
                },
            },
            // 点击事件
            tabClick: {
                from: "tabClick",
                default: () => {
                    return () => {};
                },
            },
            // 全局悬浮样式
            globalHoverClass: {
                from: "globalHoverClass",
                default: () => {
                    return null;
                },
            },
            // 图标模式
            iconMode: {
                from: "iconMode",
                default: () => {
                    return null;
                },
            },
        },
        computed: {
            // classes
            classes() {
                const classes = [];

                // 激活
                if (this.isActive) classes.push("pure-tabbar-item-active");

                // 禁用
                if (this.disabled) classes.push(this.disabledClass);

                return classes;
            },

            // styles
            styles() {
                const styles = [];
                return styles;
            },

            // 是否被激活
            isActive() {
                return this.activeValue === this.item[this.valueKey] || this.active;
            },
        },
        methods: {
            // 点击事件
            handleClick() {
                // 禁用
                if (this.disabled) return;

                // 触发事件
                this.tabClick(this.item);
            },
        },
    };
</script>

<style scoped>
    @import "./style.css";
</style>
